<template>
  <div class="app-container">
    <!-- 头部按钮区域 -->
    <div class="btn-box">
      <span></span>
      <div>
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button
            size="mini"
            circle
            icon="el-icon-refresh"
            :disabled="loading"
            @click="getAllMenus"
          ></el-button>
        </el-tooltip>
      </div>
    </div>
    <el-table
      v-loading="loading"
      style="width: 100%"
      :data="tableData"
      :header-cell-style="{
        background: '#F8F8F9',
        color: '#606266'
      }"
      row-key="permissionId"
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="菜单名称"></el-table-column>
      <el-table-column label="图标" align="center">
        <template slot-scope="scope">
          <i :class="scope.row.meta.icon"></i>
        </template>
      </el-table-column>
      <el-table-column prop="path" label="路径"></el-table-column>
      <el-table-column prop="component" label="组件"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-switch
            :value="scope.row.status === 0 ? true : false"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="handleToggleSwitch(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getAllMenus, openMenu, closeMenu } from '@/api/system/menu';
export default {
  name: 'MenuAdmin',
  data() {
    return {
      tableData: [], // 表格数据
      loading: true
    };
  },
  created() {
    this.getAllMenus();
  },
  methods: {
    async getAllMenus() {
      this.loading = true;
      const { data: res } = await getAllMenus();
      console.log('api=获取全部菜单', res);
      this.tableData = res.data.permissions;
      this.loading = false;
    },
    async handleToggleSwitch(row) {
      this.loading = true;
      let res;
      if (row.status === 0) {
        res = await closeMenu(row.permissionId);
      } else if (row.status === 1) {
        res = await openMenu(row.permissionId);
      }
      res = res.data;
      console.log('切换菜单', res);
      if (res.code === 200) {
        this.$message.success(res.message);
      } else {
        this.$message.warning(res.message);
      }
      this.getAllMenus();
    }
  }
};
</script>

<style lang="scss" scoped>
.el-table {
  margin-top: 10px;
}

.btn-box {
  display: flex;
  justify-content: space-between;
}
</style>
